<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>VISSIM仿真优化结果</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="char_1" style="width: 1600px;height:800px;float:left;"></div>
    <div id="char_2" style="width: 1600px;height:800px;float:left;"></div>
    <br>
    <div id="char_3" style="width: 1600px;height:800px;float:left;"></div>
    <div id="char_4" style="width: 800px;height:400px;float:left;"></div>
</body>
</html>



<script type="text/javascript" src="JavaScript/qwebchannel.js"></script>
<script type="text/javascript">

     draw_pic02();
     draw_pic01([]);
     draw_pic03([]);

    window.onload = function () {
    new QWebChannel(qt.webChannelTransport, function (channel) {
        // 获取qt中绑定的交互对象
        window.pyjs_station = channel.objects.Web_Chart
        // js 绑定qt中的信号
        pyjs_station.list_send_to_js.connect(function (list) {
            var end = list.pop()
            if (end === 1){
                draw_pic01(list)
            }
            else if (end === 2){
                draw_pic02()
            }
            else if (end === 3){
                draw_pic03(list)
            }
        });
    });

}

function draw_pic01(list){
    // 绘制公交车速度曲线
    var myChart = echarts.init(document.getElementById('char_1'));
    var option;
    const x_coo = Array.from({length: list.length}, (a, i) => i);
    option = {
        title: {
            text: '公交车速度曲线'
        },

    xAxis: {
        type: 'category',
        data: x_coo
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: list,
        type: 'line'
    }],
    animation: false  // 取消动画
    };
    myChart.setOption(option);
}

function draw_pic02(){
    // 绘制路口PI与deltaPI曲线
    var myChart = echarts.init(document.getElementById('char_2'));
    var option;
    var xAxisData = ['路口1', '路口2', '路口3', '路口4', '路口5'];
    var data1 = [1800, 1765, 1921, 1600, 1252];  // 原PI
    var data2 = [];  // 优先后PI
    var data3 = [-600, -600, -300, -500, -400];  //deltaPI
    for (var i = 0; i < 10; i++){
            data2.push((data1[i] + data3[i]))
    }

    var emphasisStyle = {
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)'
        }
    };

    option = {
        legend: {
            data: ['优先前PI', '优先后PI', '优化量'],
            left: '10%'
        },
        // brush: {
        //     toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
        //     xAxisIndex: 0
        // },

        title: {
            text: '各路口PI优化统计'
        },

        toolbox: {
            feature: {
                magicType: {
                    type: ['tiled', 'stack']
                },
                dataView: {}
            }
        },
        tooltip: {},
        xAxis: {
            data: xAxisData,
            name: 'X Axis',
            axisLine: {onZero: true},
            splitLine: {show: false},
            splitArea: {show: false}
        },
        yAxis: {},
        grid: {
            bottom: 100
        },
        series: [
            {
                name: '优先前PI',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: data1
            },
            {
                name: '优先后PI',
                type: 'bar',
                stack: 'two',
                emphasis: emphasisStyle,
                data: data2
            },
            {
                name: '优化量',
                type: 'bar',
                stack: 'three',
                emphasis: emphasisStyle,
                data: data3
            }
        ]
    };

    myChart.setOption(option);

}


function draw_pic03(list){
    // 绘制排放曲线
    var myChart = echarts.init(document.getElementById('char_3'));
    var option;
    const x_coo = Array.from({length: list[0].length}, (a, i) => i);
    option = {

        title: {
            text: '公交车尾气排放曲线'
        },

        legend: {
            data: ['CO', 'CO2', 'HC', 'NOX']
        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

        xAxis: {
            type: 'category',
            data: x_coo
        },


        yAxis: {
            type: 'value'
        },

        series: [
            {
                name: "CO排放量",
                type: 'line',
                stack: '总量',
                data: list[0],
            },
            {
                name: "CO2排放量",
                type: 'line',
                stack: '总量',
                data: list[1],
            },
            {
                name: "HC排放量",
                type: 'line',
                stack: '总量',
                data: list[2],
            },
            {
                name: "NOX排放量",
                type: 'line',
                stack: '总量',
                data: list[3],
            }
        ],


    animation: false  // 取消动画
    };
    myChart.setOption(option);
}

</script>